<script setup>
import { inject, onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const $http = inject('$http');
const route = useRoute();
const router = useRouter();
const userId = route.query.id;
const id = Number(userId);
const data = reactive({
    data_single: [],
})

async function getDataById() {
    const res = await $http.get(`/dep/${id}`);
    data.data_single = res.data.data;
}

async function putNewData() {
    if (confirm("确认修改吗？")) {
        try {
            await $http.put(`/dep/${id}`, data.data_single);
            toUserView();
        } catch (e) {
            alert('请求失败!');
            console.log(e.message);
        }
    }
}

function toUserView() {
    return router.go(-1);
}

onMounted(() => {
    getDataById();
})
</script>

<template>
    <h1>id = {{ userId }}</h1>
    <div class="info_box">
        <p>id:</p>
        <input type="text" disabled v-model="data.data_single.id">
        <p>部门名称：</p>
        <input type="text" v-model="data.data_single.name">
        <p>部门负责人：</p>
        <input type="text" v-model="data.data_single.principal">
        <p>负责人电话：</p>
        <input type="text" v-model="data.data_single.principal_tel">
        <p>部门电话：</p>
        <input type="text" v-model="data.data_single.tel">
    </div>
    <button @click="putNewData">确认修改</button>
    <button @click="toUserView">返回</button>
</template>

<style scoped>
input {
    width: 460px;
    height: 20px;
    padding: 5px;
    padding-left: 15px;
    border-radius: 10px;
    font-size: 16px;
}

button {
    margin-top: 10px;
    margin-right: 10px;
}
</style>
